<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <div id="app">      
        <ul>
            <li v-for="item in booksReactive">
                <!-- 
                    如果reactive对象里写的是ref数组时。
                    显示ref对象的值时，需要使用 .value
                -->
                <p>{{item.value}}</p>
            </li>
        </ul>
        <input type="button" value="添加一本书" @click="addBook">
    </div>
</body>
</html>

<script src="./js/vue.global.js"></script>
<script>    

//   reactive接收ref的数组时，不会解包

    const {createApp,ref,reactive} = Vue;

    let app = createApp({
        setup(){

            let bookRef1 = ref("三国演义");
            let bookRef2 = ref("红楼梦");

            let booksReactive = reactive([bookRef1,bookRef2]);
            
            console.log("booksReactive",booksReactive);

            console.log("booksReactive[0]",booksReactive[0]);//ref对象
            console.log("booksReactive[1]",booksReactive[1]);//ref对象

            console.log("booksReactive[0].value",booksReactive[0].value);

            function addBook(){
                booksReactive.push(ref("西游记"));
            }

            return {
                booksReactive,addBook
            }
        }
    })

    app.mount("#app");

</script>